{% extends "main/auth_views/common.html" %}

{% block body %}
  <div class="center-container">
    <div class="card p-4 shadow-lg border-0 rounded-4">
      {% if message or request.GET.message %}
        <div class="alert alert-warning d-flex flex-row align-items-center gap-2">
          <iconify-icon icon="line-md:alert-circle-twotone" height="1.3em"></iconify-icon>
          {% if message %}
            <div class="flex-grow-1">{{ message }}</div>
          {% else %}
            <div class="flex-grow-1">{{ request.GET.message }}</div>
            <script>
              history.replaceState(null, null, location.href.slice(0, location.href.indexOf("?")))
            </script>
          {% endif %}
          <button type="button" class="btn-close btn btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endif %}
      {% block card %}
        inside the card
      {% endblock %}
    </div>
  </div>
{% endblock %}

{% block head %}
  <style>
      * {
          transition: all 150ms;
      }

      .btn {
          transition: all 150ms !important;
      }

      .btn:active {
          scale: 98%;
      }

      div.card {
          width: clamp(350px, 50%, 400px);
          background: white;
      }

      div.center-container {
          display: grid;
          height: 90vh;
          place-items: center;
      }

      body {
          background: #ffffff url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%23808080' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E") center;
      }
  </style>
{% endblock %}